<script setup lang="ts">

</script>

<template>
  <view class="page-bg"></view>
</template>

<style scoped lang="scss">
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(477rpx * 2);
  overflow: hidden;
  z-index: -1;

  &:before, &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(477rpx * 2);
    height: 100%;
    opacity: 0.2;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, var(--color-primary) 0%, transparent 99%);
  }

  &:after {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
  }
}
</style>